<template>
  <div class="group_activity">
    <navigate @answerBack="answerBack">团体活动</navigate>

    <div class="activity_cont">
      <!-- 切换 -->
      <div class="tab_bar dis_flex just_center">
        <div
          class="item-tab tab_01 dis_flex just_center"
          :class="currentTab == 1 ? 'active_tab' : ''"
          @click="chooseTab(1)"
        >
          <img
            src="@/assets/images/function/activity_tab01.png"
            alt=""
            v-if="currentTab == 1"
          />
          <img
            src="@/assets/images/function/activity_tab02.png"
            alt=""
            v-else
          />
          <span>活动报名</span>
        </div>
        <div
          class="item-tab tab_02 dis_flex just_center"
          :class="currentTab == 2 ? 'active_tab' : ''"
          @click="chooseTab(2)"
        >
          <img
            src="@/assets/images/function/activity_tab03.png"
            alt=""
            v-if="currentTab == 2"
          />
          <img
            src="@/assets/images/function/activity_tab04.png"
            alt=""
            v-else
          />
          <span>历史记录</span>
        </div>
      </div>
      <div class="search_box dis_flex">
        <searchInput
          class="search_input"
          type="text"
          v-model="form.activityName"
          placeholder="搜索活动名称"
          @input="handleSearch"
          @clearInput="clearInput"
        ></searchInput>
        <div class="dis_flex" @click="isShowFilterPop = true">
          <span class="filtrate_txt">筛选</span>
          <img
            src="@/assets/images/evaluate/filtrate_icon.png"
            alt=""
            class="filtrate_img"
          />
        </div>
      </div>

      <div class="list_box" @scroll="handleScroll">
        <!-- 活动报名列表 -->
        <activityRegistration
          :activityList="activityList"
          @getSignInInfo="getGroupActivityHistory"
          v-if="currentTab == 1"
        />
        <!-- 历史记录列表 -->
        <historicalRecord :historyList="historyList" v-if="currentTab == 2" />
      </div>
    </div>
    <!-- 过滤 -->
    <filterPop
      :isShowFilterPop="isShowFilterPop"
      @getFilterInfo="getFilterInfo"
    />
  </div>
</template>

<script>
import filterPop from "./components/filterPop.vue";
import searchInput from "@/components/searchInput/index.vue";
import activityRegistration from "./components/activityRegistration.vue";
import historicalRecord from "./components/historicalRecord.vue";
import {
  queryGroupActivityList,
  queryGroupActivityHistory,
} from "@/api/funcation/groupActivity";

export default {
  data() {
    return {
      isShowFilterPop: false,
      currentTab: this.$route.query.currentTab || 1,
      value: "",
      activityList: [],
      historyList: [],
      form: {
        pageSize: 10,
        page: 1,
        total: 0,
      },
    };
  },

  components: {
    activityRegistration,
    historicalRecord,
    searchInput,
    filterPop,
  },
  created() {
    this.getTabList();
  },
  methods: {
    getTabList() {
      this.currentTab == 1
        ? this.getGroupActivityList()
        : this.getGroupActivityHistory();
    },
    async getGroupActivityList() {
      let par = {
        pageSize: this.form.pageSize,
        page: this.form.page,
        name: this.form.activityName, //活动改名称
        uid: this.form.activityPublisherId,
        type_id: this.form.activityTypeId, //活动类型
        status: this.form.activityStatusId, //状态【1未开始，2报名阶段，3签到阶段，4实施阶段，5已结束】
      };
      let { data } = await queryGroupActivityList(par);
      console.log(data.data, "lll");

      this.activityList.push(...data.data);
      this.form.total = data.total;
    },
    //签到
    async getGroupActivityHistory() {
      let par = {
        pageSize: this.form.pageSize,
        page: this.form.page,
      };
      let { data } = await queryGroupActivityHistory(par);
      this.historyList.push(...data.data);
      this.form.total = data.total;
    },
    chooseTab(v) {
      this.currentTab = v;
      this.form.page = 1;
      this.$router.push({
        path: this.$route.path,
        query: {
          currentTab: v,
        },
      });
      this.getTabList();
    },
    toDetailsPage() {
      this.$router.push("/historicalDetails");
    },
    handleScroll(e) {
      const container = e.target;
      const containerHeight = container.clientHeight;
      const contentHeight = container.scrollHeight;
      const scrollTop = container.scrollTop;
      if (scrollTop + containerHeight >= contentHeight) {
        if (
          this.form.total >= this.currentTab == 1
            ? this.activityList.length
            : this.historyList.length
        ) {
          this.form.page += 1;
          this.getTabList();
        }
      }
    },
    getFilterInfo(val) {
      this.isShowFilterPop = false;
      this.form = {
        ...this.form,
        ...val,
      };
      this.historyList = [];
      this.activityList = [];
      this.getTabList();
    },
    clearInput() {
      this.form.activityName = "";
      this.getTabList();
    },
    handleSearch(v) {
      this.form.activityName = v;
      this.getTabList();
    },
    answerBack() {
      this.$router.push({ path: "/nav/functionCenter" });
    },
  },
};
</script>

<style lang="less" scoped>
.dis_flex {
  display: flex;
  align-items: center;
}

.just_center {
  justify-content: center;
}

.group_activity {
  background-color: #f4f6fa;
  color: #333333;
}

.activity_cont {
  padding: 10px 10px 0 10px;
}

//切换
.tab_bar {
}

.item-tab {
  width: 163.33px;
  height: 33.33px;
  line-height: 33.33px;
  background: #fff;
}

.tab_01 {
  border-radius: 6.67px 0 0 6.67px;
}

.tab_02 {
  border-radius: 0px 6.67px 6.67px 0px;
}

.active_tab {
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  color: #fff;
}

.item-tab img {
  width: 16.67px;
  height: 16.67px;
  margin-right: 9.67px;
}

.item-tab span {
  font-size: 14.67px;
  line-height: 14.67px;
  font-weight: bold;
}

.search_box {
  height: 46.67px;
  line-height: 46.67px;
  padding: 0 16px 0 6.67px;
  background: #ffff;
  margin-top: 10px;
}

.search_input {
  border: 0;
  width: 263.33px;
  height: 33.33px;
  background: #f4f6fa;
  border-radius: 6.67px;
  margin: 0;
}

.filtrate_txt {
  font-size: 14px;
  color: #333333;
  margin: 0 7px 0 10px;
}

.filtrate_img {
  width: 12px;
  height: 13.33px;
}
.list_box {
  height: calc(100vh - 160px);
  overflow: hidden;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
